import React, { Component } from 'react';
import _ from 'underscore';

import ApiFactory from 'lib/ApiFactory';
import Select from 'lib/components/Select.jsx';
import Loading from 'lib/components/Loading.jsx';
import Operators from 'lib/util/FilterConditionOperators';

class Select2 extends Loading {
  renderBody(data) {
    let values = _.filter(data, p => _.contains(this.props.values, p.value));
    return (
      <Select
        multi={ this.props.multi }
        addNoMatch={ this.props.addNoMatch }
        options={ data }
        onChange={ this.props.onChange }
        value={ values } />
    );
  }; // renderBody
}

Select2.defaultProps = {
  addNoMatch: false,
  multi: true,
  store: {},
  height: 34
}

export default class ConditionItem extends Component {
  refreshInputValue({ target: { value } }) {
    let inputValue = value.trim();
    if (inputValue) {
      this.props.onFilterChanged([value.trim()]);
    } else {
      this.props.onFilterChanged(null);
    }
  } // refreshInputValue

  refreshSelectValues(values) {
    if (!values) {
      this.props.onFilterChanged(null);
      return;
    }
    if (!_.isArray(values)) {
      values = [values];
    }
    let selectValue = values.map(p => p.value);
    if (selectValue.length) {
      this.props.onFilterChanged(selectValue);
    } else {
      this.props.onFilterChanged(null);
    }
  } // refreshSelectValues

  refreshInputGroupValue() {
    let left = this.refs.filter.value.trim();
    let right = this.refs.filter1.value.trim();

    this.props.onFilterChanged([left, right]);
  } // refreshInputGroupValue

  inputBlueHandler({ target: { value } }) {
    value = value.trim();
    if (value) {
      this.props.onValueCompleted();
    }
  } // inputBlueHandler

  inputGroupBlurHandler() {
      let left = this.refs.filter.value.trim();
      let right = this.refs.filter1.value.trim();

      if (left && right) {
        this.props.onValueCompleted();
      }
  } // inputGroupBlurHandler

  getFilterValue() {
    return this.props.filter || [];
  } // getFilterValue

  renderInputGroupFilter() {
    return (
      <div className="pure-g">
        <div className="pure-u-2-5">
          <input
            ref="filter"
            type="text"
            className="input-text"
            onBlur={ this.inputGroupBlurHandler.bind(this) }
            onChange={ this.refreshInputGroupValue.bind(this) }
            value={ this.getFilterValue()[0] || '' } />
        </div>
        <div
          className="pure-u-1-5 text-align-center"
          style={{ lineHeight: '34px' }}>
          至
        </div>
        <div className="pure-u-2-5">
          <input
            ref="filter1"
            type="text"
            className="input-text"
            onBlur={ this.inputGroupBlurHandler.bind(this) }
            onChange={ this.refreshInputGroupValue.bind(this) }
            value={ this.getFilterValue()[1] || '' } />
        </div>
      </div>
    );
  } // renderInputGroupFilter

  render() {
    let currentField = _.chain(this.props.options)
                        .map(p => p.options)
                        .flatten(true)
                        .find(p => p.value === this.props.field)
                        .value();
    let currentOperators = Operators[this.props.object.data_type];
    let currentOperator = _.find(currentOperators, p => p.value === this.props.func);

    return (
      <div className="condition">
        <Select
          showSingleTooltip={ true }
          onChange={ this.props.onFieldChanged }
          options={ this.props.options }
          value={ currentField } />
        <Select
          onChange={ this.props.onFunctionChanged }
          options={ currentOperators }
          value={ currentOperator } />
        <div className="value-container">
        {
          currentOperator.valueType === 'input'
            ? (
              <input
                type="text"
                className="input-text"
                onBlur={ this.inputBlueHandler.bind(this) }
                onChange={ this.refreshInputValue.bind(this) }
                value={ this.getFilterValue()[0] || '' } />
            ) : null
        }
        {
          currentOperator.valueType === 'single-select'
            ? (
              <Select2
                multi={ false }
                addNoMatch={ true }
                onChange={ this.refreshSelectValues.bind(this) }
                store={ this.props.suggests() }
                values={ this.getFilterValue() } />
            ) : null
        }
        {
          currentOperator.valueType === 'select'
            ? (
              <Select2
                addNoMatch={ true }
                onChange={ this.refreshSelectValues.bind(this) }
                store={ this.props.suggests() }
                values={ this.getFilterValue() } />
            ) : null
        }
        {
          currentOperator.valueType === 'input-group'
            ? this.renderInputGroupFilter()
            : null
        }
        </div>
        <div
          onClick={ this.props.onRemoving }
          className="iconfont btn-iconfont">
          &times;
        </div>
      </div>
    );
  } // render
}

ConditionItem.defaultProps = {
  options: [],
  onFieldChanged: null,
  onFunctionChanged: null,
  onFilterChanged: null,
  onRemoving: null,
  onValueCompleted: null
}
